<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>California Clock Change - PST/PDT Only</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f4f8;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 90%;
            text-align: center;
        }
        h1 {
            color: #1a365d;
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }
        .subtitle {
            color: #4a5568;
            margin-bottom: 1.5rem;
        }
        .info-box {
            background: #e6fffa;
            border: 2px solid #38b2ac;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
            font-size: 1.2rem;
            line-height: 1.6;
        }
        .highlight {
            color: #2b6cb0;
            font-weight: bold;
        }
        .tonight {
            display: inline-block;
            background: #f6e05e;
            color: #744210;
            padding: 0.2em 0.5em;
            border-radius: 4px;
            margin-left: 0.5em;
            font-weight: bold;
        }
        .wrong-timezone {
            background: #fed7d7;
            border: 2px solid #f56565;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
            font-size: 1.2rem;
            line-height: 1.6;
            color: #c53030;
        }
        .body-clock {
            background: #ebf8ff;
            border: 2px solid #4299e1;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
            font-size: 1.2rem;
            line-height: 1.6;
        }
        .past-change {
            background: #faf5ff;
            border: 2px solid #805ad5;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
            font-size: 1.2rem;
            line-height: 1.6;
        }
        @media (max-width: 480px) {
            .container {
                padding: 1.5rem;
            }
            h1 {
                font-size: 1.5rem;
            }
            .info-box, .body-clock, .past-change {
                font-size: 1.1rem;
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>California Clock Change</h1>
        <div class="subtitle">For Pacific Time (PST/PDT) only</div>
        <div id="past-change"></div>
        <div id="future-change"></div>
        <div id="body-clock"></div>
        <div id="current-dst"></div>
    </div>

    <script>
        function isCaliforniaTimezone() {
            const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            return timezone === "America/Los_Angeles" || 
                   timezone === "America/Pacific" || 
                   timezone === "US/Pacific" ||
                   timezone === "PST8PDT";
        }

        function getClockChanges() {
            const now = new Date();
            const year = now.getFullYear();
            
            // Get changes for current and adjacent years to handle year boundaries
            function getYearChanges(y) {
                // Second Sunday in March
                const springForward = new Date(y, 2, 1 + (14 - new Date(y, 2, 1).getDay()));
                // First Sunday in November
                const fallBack = new Date(y, 10, 1 + (7 - new Date(y, 10, 1).getDay()));
                return [
                    { date: springForward, isSpringForward: true },
                    { date: fallBack, isSpringForward: false }
                ];
            }

            const changes = [
                ...getYearChanges(year - 1),
                ...getYearChanges(year),
                ...getYearChanges(year + 1)
            ].sort((a, b) => a.date - b.date);

            // Find the most recent past change and next future change
            const pastChange = changes.filter(change => change.date < now).pop();
            const futureChange = changes.find(change => change.date > now);

            return { pastChange, futureChange };
        }

        function formatDate(date) {
            const months = ['January', 'February', 'March', 'April', 'May', 'June', 
                           'July', 'August', 'September', 'October', 'November', 'December'];
            return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
        }

        function formatTime(date) {
            return date.toLocaleTimeString('en-US', { 
                hour: 'numeric', 
                minute: '2-digit', 
                hour12: true 
            });
        }

        function getDaysSince(date) {
            const now = new Date();
            const diffTime = Math.abs(now - date);
            return Math.floor(diffTime / (1000 * 60 * 60 * 24));
        }

        function updateBodyClockInfo(pastChange) {
            const bodyClockDiv = document.getElementById('body-clock');
            const daysSince = getDaysSince(pastChange.date);
            
            if (daysSince <= 7) {  // Show message for a week after the change
                const now = new Date();
                const dogClock = new Date(now);
                
                if (pastChange.isSpringForward) {
                    dogClock.setHours(now.getHours() - 1);
                } else {
                    dogClock.setHours(now.getHours() + 1);
                }
                
                bodyClockDiv.className = 'body-clock';
                bodyClockDiv.innerHTML = `
                    <p>🐺 Is your dog confused about meal or walk times?</p>
                    <p>While your clock says it's <span class="highlight">${formatTime(now)}</span>, 
                    your dog's internal clock thinks it's <span class="highlight">${formatTime(dogClock)}</span>!</p>
                    <p>Dogs have very reliable internal clocks and don't automatically adjust to Daylight Saving Time. 
                    Don't worry - your pup's schedule should adjust naturally over the next few days.</p>
                `;
            } else {
                bodyClockDiv.innerHTML = '';
            }
        }

        function updateInfo() {
            if (!isCaliforniaTimezone()) {
                document.getElementById('future-change').className = 'wrong-timezone';
                document.getElementById('future-change').innerHTML = 'You appear to be outside of California/Pacific Time.<br>This tool only works for Pacific Time (PST/PDT).';
                return;
            }

            const { pastChange, futureChange } = getClockChanges();
            
            // Show past change
            const pastChangeDiv = document.getElementById('past-change');
            const pastSaturday = new Date(pastChange.date);
            pastSaturday.setDate(pastChange.date.getDate() - 1);
            
            pastChangeDiv.className = 'past-change';
            pastChangeDiv.innerHTML = `
                <div>Most recent change:</div>
                On <span class="highlight">Sunday, ${formatDate(pastChange.date)}</span>, 
                clocks ${pastChange.isSpringForward ? 'sprang forward' : 'fell back'} 
                (you ${pastChange.isSpringForward ? 'lost' : 'gained'} one hour of sleep).
            `;

            // Show future change
            const futureChangeDiv = document.getElementById('future-change');
            const futureSaturday = new Date(futureChange.date);
            futureSaturday.setDate(futureChange.date.getDate() - 1);

            const now = new Date();
            const isTonight = now.getDate() === futureSaturday.getDate() && 
                            now.getMonth() === futureSaturday.getMonth() && 
                            now.getFullYear() === futureSaturday.getFullYear();

            const sleepEffect = futureChange.isSpringForward ? 'lose an hour of sleep' : 'get an extra hour of sleep';
            const clockEffect = futureChange.isSpringForward ? 
                'clocks spring forward from 2:00 AM to 3:00 AM' : 
                'clocks fall back from 2:00 AM to 1:00 AM';

            const tonightBadge = isTonight ? '<span class="tonight">That\'s tonight!</span>' : '';

            futureChangeDiv.className = 'info-box';
            futureChangeDiv.innerHTML = `
                <div>Next change:</div>
                When you go to bed on <span class="highlight">Saturday, ${formatDate(futureSaturday)}</span>${tonightBadge}, 
                you will ${sleepEffect}!<br><br>
                The ${clockEffect} on 
                <span class="highlight">Sunday, ${formatDate(futureChange.date)}</span>.
            `;

            // Update body clock info based on past change
            updateBodyClockInfo(pastChange);

            // Determine if it is currently daylight savings time or not
            const currentDstDiv = document.getElementById('current-dst');
            const isDst = pastChange.isSpringForward && !futureChange.isSpringForward;
            currentDstDiv.className = 'info-box';
            currentDstDiv.innerHTML = `
                <div>Current status:</div>
                It is currently <span class="highlight">${isDst ? 'Daylight Saving Time (PDT)' : 'Standard Time (PST)'}</span>.
            `;
        }

        updateInfo();
        
        // Update the times every minute
        setInterval(updateInfo, 60000);
    </script>
</body>
</html>
